<template>
    <div>
        <van-nav-bar title="一起来抽签" left-arrow @click-left="onClickLeft" />

        <div class="bg">
            <div style="color: white;padding: 0.6rem 0 0 0.9rem ">你还未参与抽签</div>
            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
                <div style="width: 100%;padding: 1rem 1.25rem 0rem 1.25rem;">
                    <h3 style="text-align: center;color: white;padding-top: 1rem;font-size: 24px;">活动一号</h3>
                    <div style="color: aliceblue;margin-top: 1rem;text-align: center;margin-bottom: 2rem;">
                        5位已参与，1位幸运儿已被抽中</div>
                    <van-button style="width: 100%;background: rgba(255, 227, 18, 1);color: rgba(64, 136, 242, 1);"
                        plain round @click="star()" type="info">参与抽签</van-button>
                </div>
            </div>
        </div>
        <van-field v-model="sms" id="put" center clearable label="邀请链接" readonly>
            <template #button>
                <van-button size="small" type="primary" @click="copyToClip">复制</van-button>
            </template>
        </van-field>
        <div class="card">
            <div class="icon-text"><img src="~@/assets/img/yuan.png"
                    style="width: 1rem;height: 1rem;display: inline-block;margin-right: 0.5rem;" alt=""><span>已参与</span>
            </div>
            <hr style="margin: 1rem 10px; ">
            <div style="margin: 10px;" v-for="(item, index) in list" :key="index">
                <div style="display: inline-block;width: 50%;" v-if="item.check == '2'">
                    <div>姓名：{{ item.name }}</div>
                    <div>公司：{{ item.gov }}</div>
                </div>
                <div style="display: inline-block;width: 50%;color: rgba(33, 181, 92, 1);" v-if="item.check == '1'">
                    <div>姓名：{{ item.name }}</div>
                    <div>公司：{{ item.gov }}</div>
                </div>
                <div style="display: inline-block;width: 50%;">
                    <div style="height: 100%;text-align: right;">
                        <span v-if="item.check == '2'">未抽中</span>
                        <span style="color: rgba(33, 181, 92, 1);" v-if="item.check == '1'">已抽中</span>
                    </div>

                </div>
                <hr>
            </div>
        </div>


    </div>
</template>
<script>
export default {
    data() {
        return {
            sms: 'http://192.168.1.204:8080/#/MainOk',
            showShare: false,
            active: 1,
            options: [
                [
                    { name: '微信', icon: 'wechat' },
                    { name: '朋友圈', icon: 'wechat-moments' },
                    { name: '微博', icon: 'weibo' },
                    { name: 'QQ', icon: 'qq' },
                ],
            ],
            list: [{ name: "ggg", gov: "湖南鑫卫", check: "1" }, { name: "ggg", gov: "北京迪文", check: "2" }, { name: "ggg", gov: "湖南晟通", check: "2" }],
            loading: false,
            finished: false,
            refreshing: false,
            form: {
                usernick: '',
                username: ''
            },
            readonly: false
        };
    },
    created() {
        this.getuser()
    },
    methods: {
        copyToClip() {
            this.$copyText(this.sms).then(
                function (e) {
                    console.log("copy arguments e:", e);
                },

            );
            this.$toast.success('复制链接成功');
        },
        onSelect(option) {
            Toast(option.name);
            this.showShare = false;
        },
        onClickLeft() {
            this.$router.go(-1)
        },
        getuser() {
            if (JSON.parse(localStorage.getItem('choujianguser'))) {
                const form = JSON.parse(localStorage.getItem('choujianguser'))
                this.form.usernick = form.usernick
                this.form.username = form.username
                this.readonly = true
            } else {
                this.readonly = false
            }
        },
        star() {
            if (this.readonly == false) {
                this.$dialog.confirm({
                    message: '您还未填写信息，请填写相关信息以后进行抽签！点击确定即可跳转填写信息页。',
                })
                    .then(() => {
                        this.$router.push('/manager')
                    })
                    .catch(() => {
                        // on cancel
                    });
            } else {

            }
        },
    },
}
</script>
<style scoped>
.bg {
    background: url(~@/assets/img/background.png);
    background-position: center center;
    background-size: cover;
    height: 15rem;
    margin: 20px;
    border-radius: 15px;

}

.van-button--primary {
    background: rgba(65, 135, 242, 1);
    color: rgba(255, 255, 255, 1);
    border: 0px;
    width: 4.3rem;
}

.van-field__label {
    width: 3.5rem;
}

.lucky-draw-panel__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f7faff;

    .lucky-draw-panel__title {
        font-size: 42px;
        margin: 24px 0;
    }
}

.card {
    margin-bottom: 24px;
    padding: 24px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 12px #ebedf0;
}

h3 {
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 18px;
}

.icon-text {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
}
hr{
    background-color: rgba(204, 204, 204, 1);;
}
</style>